<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>过滤器</title>
</head>
<script type="text/javascript" src="../vue.js"></script>
<script type="text/javascript" src="../dayjs.min.js"></script>

<!--
          过滤器：
            定义：对要显示的数据进行特定格式化之后在进行显示（适用于一些简单的逻辑）
            语法：
                1.注册过滤器：Vue.filter(name,callback) 或 new Vue(filters:{})
                2.使用过滤器：{{xxx | 过滤器名}} 或 v-bind：属性 =“xxx | 过滤器名”
            备注：
                1.过滤器也可以接受额外的参数，多个过滤器也可以进行链式编程
                2.并没有改变原始数据，是产生的新的对应数据
-->

<body>


<div id="root">
 <h2>显示格式化之后的时间</h2>
<!--    计算属性实现-->
  <h3>现在是:{{fmtTime}}</h3>
<!--    methods实现-->
    <h3>现在是:{{getFmtTime()}}</h3>
<!--    过滤器实现-->
    <h3>现在是:{{time | timeFormater}}</h3>
    <h3>现在是:{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
<!--    过滤器默认接受前面的返回值-->

    <h3 :x="msg | mySlice" >尚硅谷</h3>
<!--    <input type="text" v-model="msg">-->
</div>

<div id="root2">
    {{name}}
</div>

</body>

<script type="text/javascript">

  Vue.config.productionTip = false
    //全局的过滤器
  Vue.filter('mySlice',function (value){
      return value.slice(0,4)
  })

  new Vue({
    el:'#root',
    data:{
      time:1669627529659,  //时间
      msg:'你好1234'
    },
    computed:{
        fmtTime(){
            return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
        }
    },
    methods:{
        getFmtTime(){
            return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
        }
    },
    filters:{
        //局部过滤器，只能在Vue实例中使用
        timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
            return dayjs(value).format(str)
        },
        mySlice(value){
            return value.slice(0,4)
        }
    }
  })

  new Vue({
    el:'#root2',
    data:{
        name:'itshumm'
    }
  })

</script>
</html>